<!-- 图文导航 -->
<template>
    <div
        class="cls-flex"
        :style="{
            padding: `${data.rpxStyle['padding-top']}px ${data.rpxStyle['padding-left']}px ${data.rpxStyle['padding-bottom']}px`,
            // marginBottom: `${data.rpxStyle['margin-bottom']}px`,
            background: data.style.background,
            color: data.style.color,
            borderRadius: `${data.rpxStyle['border-radius']}px`,
            flexFlow: `row ${data.data.data.length < 6 ? 'nowrap' : 'wrap'}`,
        }"
    >
        <div class="cls-column grid-item" :style="itemWidth" v-for="(item, index) in data.data.data" :key="index">
            <el-image class="grid-icon" :src="item.url" fit="cover" :style="{ width: `${data.rpxStyle['img-size']}px` }" v-if="item.url" />
            <div class="grid-icon cls-center icon-none" v-else :style="{ width: `${data.rpxStyle['img-size']}px`, height: `${data.rpxStyle['img-size']}px` }">
                <el-icon size="27px" color="#E1E4E7">
                    <PictureFilled />
                </el-icon>
            </div>

            <div
                class="nav-text"
                :style="{ marginTop: `${data.rpxStyle['title-top']}px`, marginBottom: `${data.rpxStyle['title-bottom']}px`, color: data.style.color }"
            >
                {{ item.title }}
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from "vue"
import { PictureFilled } from "@element-plus/icons-vue"

/**
 * 图文导航
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 2,
            type_name: "grid", //金刚区导航
            text: "图文导航",
            rpxStyle: {},
            data: {
                data: [{ title: "导航1" }, { title: "导航2" }, { title: "导航3" }, { title: "导航4" }],
            },
        },
    },
})

const itemWidth = computed(() => {
    let size = 0
    if (props.data.data.data.length < 6) {
        size = parseInt(100 / props.data.data.data.length)
    } else if (props.data.data.data.length == 6 || props.data.data.data.length == 9) {
        size = 33.33
    } else if (props.data.data.data.length == 8 || props.data.data.data.length == 12) {
        size = 25
    } else {
        size = 20
    }
    return `width:${size}%;`
})
</script>

<style lang="less" scoped>
.grid-item {
    flex: none;
    align-items: center;
    .grid-icon {
        flex: 1;
    }
    .nav-text {
        color: #000e37;
        font-size: 12px;
    }
    .icon-none {
        padding: 6px 0px;
    }
}
</style>
